<template>
  <div class="bg-white rounded-lg p-5 h-full flex flex-col">
    <div>
      <div class="font-bold text-lg mb-4">添加医疗卫生</div>
      <el-form
        :rules="rules"
        style="width: 400px"
        ref="form"
        :model="formData"
        label-width="160px"
      >
        <el-form-item label="请输入企业名称" prop="enterpriseName">
          <el-input
            v-model="formData.enterpriseName"
            placeholder="请输入企业名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="机构代码" prop="creditCode">
          <el-input
            @input="onInput"
            v-model="formData.creditCode"
            placeholder="请输入机构代码"
          ></el-input>
        </el-form-item>
        <el-form-item label="机构类别" prop="medicalOrgType">
          <el-select
            v-model="formData.medicalOrgType"
            placeholder="请选择机构类别"
            class="w-full"
          >
            <el-option
              v-for="item in dict.type.medical_org_type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在镇/街道" prop="townCode">
          <el-select
            v-model="formData.townCode"
            @change="handleTownChange"
            placeholder="请选择所在镇/街道"
            class="w-full"
          >
            <el-option
              v-for="item in treeList"
              :key="item.code"
              :label="item.mname"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" prop="addr">
          <el-input
            v-model="formData.addr"
            placeholder="请输入机构代码"
          ></el-input>
        </el-form-item>

        <el-form-item label="医院级别" prop="medicalLevel">
          <el-select
            v-model="formData.medicalLevel"
            placeholder="请选择医院级别"
            class="w-full"
          >
            <el-option
              v-for="item in dict.type.medical_level"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否预防接种机构" prop="preventStatus">
          <el-radio-group v-model="formData.preventStatus">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="是否取得营业许可证" prop="medicalLicenseStatus">
          <div v-if="hasLicense">
            <el-tag type="info" size="default">

              <dict-tag
                :options="dict.type.medical_license_status"
                :value="formData.medicalLicenseStatus"
              >
              </dict-tag>
            </el-tag>
          </div>
          <el-button v-else @click="handleQueryLicense" type="primary"
            >查询状态</el-button
          >
        </el-form-item>

        <el-form-item label="是否备案" prop="recordStatus">
          <div v-if="hasRecord">
           <el-tag type="info" size="default">
            <dict-tag
              :options="dict.type.medical_record_status"
              :value="formData.recordStatus"
            >
            </dict-tag>
            </el-tag>

          </div>
          <el-button v-else  @click="handleQueryRecord" type="primary"
            >查询备案状态</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <hr class="my-4" />
    <div>
      <el-button @click="goBack">返回</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
import {
  getCascaderOptionsFun,
  getSelectOptionsFun,
} from "@/utils/business.js";
import {
  addHospitalAPI,
  getRecordAPI,
  getLicenseAPI,
} from "@/api/zhangping/health-care/base-info.js";
import {getZpStreetListApi} from "@/api/common.js"
export default {
  dicts: ["medical_level","medical_record_status","medical_license_status","medical_org_type"],
  data() {
    return {
      formData: {
        enterpriseName: "",
        creditCode: "",
        medicalOrgType: "",
        townCode: "",
        town: "",
        medicalLevel: "",
        recordStatus: "",
        preventStatus: "",
        medicalLicenseStatus: "",
        addr:""
      },
      treeList: [],
      hasRecord: false, //是否备案
      hasLicense: false, //是否取得营业许可证
      timer: 0,
      rules: {
        medicalOrgType: [
          { required: true, message: "请选择机构类别", trigger: "change" },
        ],
        enterpriseName: [
          { required: true, message: "请输入医疗机构名称", trigger: "change" },
        ],
        creditCode: [
          { required: true, message: "请输入医疗机构代码", trigger: "change" },
        ],
        medicalLevel: [
          { required: true, message: "请选择医疗等级", trigger: "change" },
        ],
        recordStatus: [
          { required: true, message: "请查询是否备案", trigger: "change" },
        ],
        townCode: [
          { required: true, message: "请选择所在镇/街道", trigger: "change" },
        ],
        medicalLicenseStatus: [
          {
            required: true,
            message: "请查询是否取得许可证",
            trigger: "change",
          },
        ],
        preventStatus: [
          {
            required: true,
            message: "请选择是否预防接种机构",
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {},
  created() {
    this.getTreeList();
  },
  methods: {
    onInput(value) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.hasLicense = false;
        this.hasRecord = false;
      }, 500);
    },
    handleTownChange(value) {
      const selectedItem = this.treeList.find(item => item.code === value);
      if (selectedItem) {
        this.formData.town = selectedItem.mname; // 将选中项的 label 存入 formData
      }
    },
    getTreeList() {
      getZpStreetListApi().then((res) => {
        this.treeList = res.data;
      });
    },
    handleQueryLicense() {
      if (this.formData.creditCode == "") {
        this.$message.error("请输入医疗机构代码");
        return;
      }
      console.log(this.dict.type.medical_level);

      getLicenseAPI({ creditCode: this.formData.creditCode }).then((res) => {
        if (res.code == 200) {
          this.formData.medicalLicenseStatus = res.data.medicalLicenseStatus;
          this.hasLicense = true;
        }
      });
    },
    handleQueryRecord() {
      if (this.formData.creditCode == "") {
        this.$message.error("请输入医疗机构代码");
        return;
      }
      getRecordAPI({ creditCode: this.formData.creditCode }).then((res) => {
        if (res.code == 200) {
          this.formData.recordStatus = res.data.recordStatus;
          this.hasRecord = true;
        }
      });
    },
    submit() {

      this.$refs["form"].validate((valid) => {
        if (valid) {
          addHospitalAPI(this.formData).then((res) => {
            console.log(res);

            if (res.code == 200) {
              this.$message.success("添加成功");
              this.$router.back();
            }
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    goBack() {
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped></style>
